<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
        <script src="../../../CommonTool/commonNetWork.js"></script>
        <script src="../../../script/jquery.js"></script>
    </head>
    <body>
        <header class="aui-bar aui-bar-nav" id="aui-header">
            <div class="aui-pull-left aui-btn" onclick="close_win();">
                <span class="aui-iconfont aui-icon-left"></span>返回
            </div>
            <div class="aui-title">基础-高级-表情模仿</div>
        </header>
        <section class="aui-grid marginBody">
            <div class="aui-row">
                <div class="aui-col-xs-1"></div>
                <div class="aui-col-xs-5">
                    <video controls id="ImitateVedio" style="height: 100%; width: 100%;">
                    <source type="video/mp4" src="http://172.16.32.194/social/advanced/4-表情模仿/1.mp4" />
                    </video>
                </div>
               <div class="aui-col-xs-1"></div>
                <div class="aui-col-xs-4" >
                    <img src="http://172.16.32.194/social/basic/4-表情模仿/像框.png" alt="" id="PreviewBody" />
                    <video id="videoPreview" autoplay playsinline style=" display: none;height: 100%; width: 100%;"></video>
                    <video id="playVedio"    controls style=" display: none;height: 100%; width: 100%;"></video>
                </div>
                <div class="aui-col-xs-1"></div>
            </div>
            <div class="aui-row">
                <div class="aui-col-xs-7"></div>
                <div class="aui-col-xs-4">
                    <div class="aui-btn aui-btn-primary StyleButton" id="startButton" >开始模仿</div>
                    <div class="aui-btn aui-btn-primary StyleButton" id="stopButton" style="display: none;">结束模仿</div>
                    <div class="aui-btn aui-btn-primary StyleButton" id="playButton" style="display: none;">播放视频</div>
                </div>
            </div>
        </section>
        <div class="footbar">
            <p class="barLeft" onclick="toggleMenu()">第一关</p>
            <div class="barCenter">
                <div id="InitialButton" style="float: left; margin-left: 4%" onclick="InitialClick()">
                    <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="" />
                </div>
                <div
                    id="InitialButton1"
                    style="float: left; margin-left: 4%; display: none"
                    onclick="ShowInitialClick()"
                >
                    <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="" />
                </div>
                <div id="InitialButton2" style="float: left; margin-left: 3%; display: none">
                    <audio
                        src="http://172.16.32.194/promptsound/像我这样做.mp3"
                        id="audioBody"
                        controls
                        autoplay
                    ></audio>
                    <img
                        style="width: 2rem; height: 1.6rem; margin-top: 12%"
                        src="http://172.16.32.194/commonButton/播放2.png"
                        alt=""
                        onclick="ImgAudioClick()"
                    />
                </div>
                <div id="InitialButton4" style="float: left; margin-left: 4%; display: none">
                    <img
                        style="width: 2rem; height: 2rem; margin-top: 6%"
                        src="http://172.16.32.194/commonButton/刷新1.png"
                        alt=""
                        onclick="ResetClick2()"
                    />
                </div>
            </div>
            <p class="barright">
                <img
                    src="http://172.16.32.194/commonButton/next1.png"
                    alt=""
                    class="BarBottom"
                    onclick="go_forward();"
                />
            </p>
            <p class="barright">
                <img
                    style="width: 3.5rem; height: 1.5rem; margin-top: 6%"
                    src="http://172.16.32.194/commonButton/pass1.png"
                    onclick="passclick();"
                />
            </p>
        </div>
        <!-- 通过 -->
        <div class="backdrop_bg" id="backdropPass">
            <audio src="http://172.16.32.194/commonButton/鼓掌音效.mp3" id="audioBodyPass"></audio>
            <div class="backdrop_contentPasseGif"></div>
        </div>
    </div>
    <div class="menu" id="menu">
        <div class="menu-item" onclick="goto_page(1)">第一关</div>
        <div class="menu-item" onclick="goto_page(2)">第二关</div>
        <div class="menu-item" onclick="goto_page(3)">第三关</div>
        <div class="menu-item" onclick="goto_page(4)">第四关</div>
        <div class="menu-item" onclick="goto_page(5)">第五关</div>
    </div>
    
    </body>
</html>
<script src="./ExpressionImitate.js"></script>
<script>
    var isRecording = true;
    var token = "";
    var userid = "";
    var currentTimestamp = "";
    var operationName = "";
    var additionalInfo = "";
    var groupId = "";
    var scene = "基础";
    var sceneLevel = "高级";
    var courseType = "表情模仿";
    var classSort = "1";
    var moodType="开心";
    var remarks = "";
    var classType = "学习";
    let mediaRecorder;
    let chunks = [];
    let blob;
    let videoStream;
    var Nowdate = "";
    var NowdateString = "";
    let ImitatefileName = "";
    // 用于存储摄像头视频流的变量
    let stream;
    apiready = function () {
        isRecording = true;
        document.getElementById("audioBody").style.display = "none";
        const audio = document.getElementById("audioBody");
        audio.addEventListener("ended", () => {
            document.getElementById("ImitateVedio").play();
        });
        token = api.pageParam.token;
        userid = api.pageParam.uid;
        currentTimestamp = Date.now();
        operationName = "ing";
        additionalInfo = "";
        if (api.pageParam.groupId !== undefined) {
                groupId = api.pageParam.groupId;
            } else {
                InitializeCommonNetWork();
            }
        };
    function passclick() {
        document.getElementById("backdropPass").style.display = "block";
        document.getElementById("audioBodyPass").play();
        setTimeout(() => {
            document.querySelectorAll("audio").forEach((audio) => audio.pause())
            api.openWin({
                name: "ExpressionImitate2",
                url: "./ExpressionImitate2.html",
                pageParam: {
                    uid: userid,
                    token: token,
                    groupId: groupId,
                },
                reload: true,
            });
        }, 2000);
        currentTimestamp = Date.now();
        operationName = "ing";
        additionalInfo = "right";
        CommonNetWork();
    }
    function go_forward() {
        document.getElementById("audioBody").pause();
        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: "ExpressionImitate2",
            url: "./ExpressionImitate2.html",
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
        });
    }

    function ResetClick2() {
            api.openWin({
                name: "ExpressionImitate1",
                url: "./ExpressionImitate1.html",
                pageParam: {
                    uid: userid,
                    token: token,
                    groupId: groupId,
                },
                reload: true,
                animation: { 
            type: "none", // 禁用动画类型
            duration: 0   // 动画时长设为0
        },
            });
        }
    // function RecordVideo(){
    //     api.actionSheet({
    //         title: '',
    //         cancelTitle: '取消',
    //         buttons: ['拍摄视频']
    //     }, function(ret, err) {
    //         var index = ret.buttonIndex;
    //         if(index ==1){
    //             var has = hasPermissionObj('camera');
    //             if(!has || !has[0] || !has[0].granted){
    // 	    	api.confirm({
    // 			    title: '提醒',
    // 			    msg: '没有获得 ' +'视频' + " 权限\n是否前往设置？",
    // 			    buttons: ['去设置', '取消']
    // 			}, function(ret, err) {
    // 			    if(1 == ret.buttonIndex){
    // 			    	reqPermission('camera');
    // 			    }
    // 			});
    //     		return false;
    //     	} else{
    //             api.getPicture({
    //                     sourceType: 'camera',
    //                     mediaValue: 'video',
    //                     destinationType: 'url',
    //                     allowEdit: true,
    //                     quality: 100,
    //                     videoQuality:'high',
    //                     saveToPhotoAlbum: false
    //                 }, function(ret, err) {
    //                     if(ret){
    //                         //这里是上传到阿里云服务的操作

    //                     }
    //                 })
    //         }
    //         }
    //     })
    // }
        function goto_page(number) {
        const pages = [
            "ExpressionImitate1",
            "ExpressionImitate2",
            "ExpressionImitate3",
            "ExpressionImitate4",
            "ExpressionImitate5",
        ];

        var name = pages[number - 1];
        var url = "./" + name + ".html";

        document.querySelectorAll("audio").forEach((audio) => audio.pause());

        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
        });
    }
    function toggleMenu() {
        var menu = document.getElementById("menu");
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
</script>
